<template lang="html">
  <div class="bg-f8">
    <div class="mt-10 bg-fff my-line">
      <div class="pd-15">
        <div class="clearfix">
          <div class="fl my-14-55 mt-5">整体评价</div>
          <ul class="fl clearfix my-pos" id="zhiliang">
              <li  @click="select(item,1)"></li>
              <li  @click="select(item,2)"></li>
              <li  @click="select(item,3)"></li>
              <li  @click="select(item,4)"></li>
              <li  @click="select(item,5)"></li>
          </ul>
        </div>
      </div>
    </div>
     <div class=" bg-fff">
       <div class="pd-15">
         <p class="my-14-55 pj-p">发表评价</p>
         <textarea class="text-area my-13-97 mt-5" rows="5" placeholder=""></textarea>
       </div>
     </div>

     <div class="text-center mt-40">
         <button class="login-btn w9" @click="comment">提交评论</button>
     </div>
  </div>
</template>

<script>
export default {
    data(){
      return{
        num2:'',

        goods_evaluations:[],
      };
    },
    mounted(){
      this.getPingfen('zhiliang')
    },
    methods: {
      select(item,index){

            item.bzcurIndex = index+1

        },

         getPingfen(id){
          var vm = this
          var fenshu = 0;
          var oPf = document.getElementById(id);
          var aLi = oPf.getElementsByTagName('li');
          var i = 0;
          for (i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onclick = function () {
              fenshu = this.index + 1;
               if (id == 'zhiliang') {
                vm.num2 = fenshu
              }
              console.log(vm.num1 + '---' + vm.num2 + '---' + vm.num3)

              for (i = 0; i < aLi.length; i++) {
                if (i <= this.index) {
                  aLi[i].className = 'check';
                }
                else {
                  aLi[i].className = '';
                }
              }
            }
          }

          return fenshu;
        }
     },

}
</script>

<style scoped>

 body {
   background-color: #f5f5f5;
 }
  .bg-f8{
    background-color: #f5f5f5;
  }
  .my-line {
    border-bottom: 1px solid #f7f7f7;
  }
  .check {
    float: left;
    width: .65rem;
    height: .6rem;

  }
  .my-14-55{
    font-size: .7rem;
    color: #555555;
  }
  .pj-p {
     text-align: left;
  }
  .mt-40 {
    margin-top: 2rem;
  }

  .mt-5 {
    margin-top: .25rem;
  }

  .pdt-15 {
    padding-top: .5rem;
  }

  .right {
    text-align: right;
  }

  .text-area {
    width: 100%;
    border: none;
    background-color: #f8f8f8;
    border-radius: .2rem;
  }

  .my-pos {
    position: absolute;
    margin-left: 3.5rem;
    margin-top: .2rem;
  }

  .pd-mlr {
    padding: .75rem 0;
    margin: 0 .75rem;
  }

  /* .pdtb-15 {
    padding: .75rem 0;
  } */

  /* .my-img {
    width: 2.5rem;
    height: 2.5rem;
  } */

  /* .w1 {
    width: 3.25rem;
  } */

  /* .w2 {
    width: calc(100% - 3.25rem);
  } */

  .w9 {
    width: 90%;
    font-size: .75rem;
  }
  ul li {
    float: left;
    width: .9rem;
    height: .9rem;
    margin-right:.2rem;
    background: url("images/details-star2.svg") no-repeat;
    -webkit-background-size:.85rem; background-size:.85rem;
  }

  .check {
    float: left;
    width: .85rem;
    height: .85rem;
    margin-right:.1rem;
    background: url("images/details-star1.svg") no-repeat;
    -webkit-background-size:.85rem; background-size:.85rem;
  }
  .content{
    padding-bottom:1rem;
  }

</style>
